<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
      outline-style: none;
      border:none;
      vertical-align: middle;
      color: black;
    }
    html,body{
      width: 100%;
      height: 100%;
    }
    body{
      background: url('images/bg.jpg') top center;
      /* background-size: cover; */
      background-attachment: fixed;
    }
    .nav{
      width: 100%;
      height: 100px;
      background-color: white;
    }
    .w{
      /* width: 980px; */
      width: 75%;
      height: 100%;
      margin: 0 auto;
      position: relative;
    }
    .logo{
      position: absolute;
      top:50%;
      transform: translateY(-50%);
    }
    .search{
      width: 380px;
      height: 30px;
      border: 1px solid #ccc;
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .search input:nth-child(1){
      width: 320px;
      height: 30px;
      float: left;
      padding-left: 10px;
      box-sizing: border-box;
    }
    .search input:nth-child(2){
      width: 60px;
      height:30px;
      background: url('images/search.png') no-repeat center;
      background-color:skyblue;
      float: left;
    }
    .other{
      position: absolute;
      right: 0;
      top:50%;
      transform: translateY(-50%);
    }
    .other li{
      float: left;
      margin-left: 10px;
      font-size: 12px;;
    }
    .hot{
      position: absolute;
      bottom: 15px;
      left: 300px;
    }
    .hot li{
      float: left;
      font-size: 12px;
      margin-right: 8px;
    }
    .content{
      /* width: 980px; */
      width: 75%;
      height: 100%;
      margin: 10px auto;

    }
    .content img{
      width: 100%;
    }
    .to_top{
      width: 60px;
      height: 60px;
      background: url('images/to_top.png') no-repeat center;
      position: fixed;
      bottom: 20px;
      right: 10px;
      display: none;
    }
    .fixed_nav{
      height: 80px;
      border-bottom: 1px solid #ccc;
      position: fixed;
      top:0;
      left: 0;
    }
    .fixed_nav .hot{
      display: none;
    }
  </style>
</head>
<body>
  <div class="nav">
    <div class="w">
      <div class="logo"><a href="javascript:;"><img src="images/logo.png" alt=""></a></div>
      <div class="search">
        <input type="text" placeholder="兴趣部落">
        <input type="button">
      </div>
      <div class="other">
        <ul>
          <li><a href="javascript:;">部落管理</a></li>
          <li><a href="javascript:;">帮助</a></li>
          <li><a href="javascript:;">登录</a></li>
        </ul>
      </div>
      <div class="hot">
        <ul>
          <li><a href="javascript;;">趣味测试</a></li>
          <li><a href="javascript;;">吴亦凡</a></li>
          <li><a href="javascript;;">鹿晗</a></li>
          <li><a href="javascript;;">迪丽热巴</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="content">
    <img src="images/content.png" alt="">
  </div>
  <div class="to_top"></div>
  <script>
    var body = document.querySelector('body');
    var nav = document.querySelector('.nav');
    var to_top = document.querySelector('.to_top');

    body.onscroll = function(e){
      var scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
      if(scrollTop > 300){
        nav.classList.add('fixed_nav');
        to_top.style.display = 'block';
      }else{
        nav.classList.remove('fixed_nav');
        to_top.style.display = 'none';
      }
    }
    //点击底部按钮 动画效果回到顶部
    to_top.onclick = function(){
      animate(0,30,20)
    }

    //动画
    var timeId = null;
    var current = 0;
    function animate(target,time,step){
      if(timeId){
        clearInterval(timeId);
        timeId = null;
      }
      
      timeId = setInterval(function(){
        //判断移动的方向
        //获取当前移动的位置
        current = document.body.scrollTop || document.documentElement.scrollTop;
        //如果当前位置 < 目标位置  向下移动
        //如果当前位置 > 目标位置  向上移动
        if(Math.abs(current) < Math.abs(target)){
          step = Math.abs(step);
        }else{
          step = -Math.abs(step);
        };
        if(Math.abs(current - target) <= Math.abs(step)){
          current = target;
          clearInterval(timeId);
        }else{
          current += step;
        }
        document.body.scrollTop = current;
        document.documentElement.scrollTop = current;
      },time);
    };
  </script>
</body>
</html>